import React, { Component } from "react";
import styles from "./address.module.scss";
import {connect} from "react-redux"
import {withRouter} from "react-router-dom"

class AddressPage extends Component {
  render() {
    return (
      <div>
        <div className={styles.addressTopNav}>
          <div className={styles.topNavLeft}>
            <svg className={styles.icon} aria-hidden="true"
            onClick={() => {
                this.props.history.push('/user')
            }
            }>
              <use href="#icon-zuojiantou"></use>
            </svg>
          </div>
          <div className={styles.topNavCenter}>收货地址</div>
          <div className={styles.topNavRight}
          onClick={() => {
            this.props.history.push('/addAddress')
          }
          }>新增地址</div>
        </div>
        {
            this.props.isLogin?(<div className={styles.addressList}>
                {this.props.addressList.map((item) => {
                  return (
                    <div className={styles.item} key={item.id}>
                      <div className={styles.itemLeft}>
                        <h3>{item.address}</h3>
                        <p>{item.doorNum}</p>
                        <div>
                          <span>{item.name}</span>
                          <span>{item.tel}</span>
                        </div>
                      </div>
                      <div className={styles.itemRight}>
                        <svg className={styles.icon} aria-hidden="true"
                        onClick={() => {
                          this.props.history.push('/updateAddress')
                        }
                        }>
                          <use href="#icon-bianji"></use>
                        </svg>
                      </div>
                    </div>
                  );
                })}
              </div>):(
                  <div className={styles.goLogin}>
                      <button onClick={() => {
                          this.props.history.push('/login')
                      }
                      }>去登录</button>
                  </div>
              )
        }

        
      </div>
    );
  }
}

const mapStateToProps = (state) => {
    return {
      isLogin: state.userReducer.isLogin,
      addressList: state.addressReducer.addressList,
    };
  };
export default withRouter(connect(mapStateToProps, null)(AddressPage));
